<template>
	這裏是 繪畫 内容展示欄
	<div class="draw_body">
		<div class="draw_unit" id="draw__unit">
			<div class="draw_author">
				Provider&nbsp;:&nbsp;
				<a class="a_link link_provider" href="/#/ntk" draggable="false">李巨松</a>
			</div>
			<div class="draw_honor">hhhh66666666666666666666</div>
			<div class="draw_setting"><img class="setting_icon" src="../../../../assets/logo.png" /></div>
			<div class="draw_display" id="draw__display">
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
				<div class="dis_imgPosition"><img class="dis_image" src="../../../../assets/logo.png" /></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { inject, onMounted } from 'vue';
let getSourceUrl = inject('getSourceUrl');
getSourceUrl();

onMounted(() => {
	let unitEl = document.getElementById('draw__unit');
	// @mouseover="overHandler" @mouseleave="leaveHandler"
	unitEl.addEventListener('mouseover', overHandler);
	unitEl.addEventListener('mouseleave', leaveHandler);
});

function overHandler() {
	let currentel = document.getElementById('draw__unit');
	currentel.addEventListener('mousewheel', mousewheelEvent);
	// console.log("123");
}

function leaveHandler() {
	let currentel = document.getElementById('draw__unit');
	currentel.removeEventListener('mousewheel', mousewheelEvent);
	// console.log("un123");
}

function mousewheelEvent(event) {
	// console.log("gundongl ");
	let disEle = document.getElementById('draw__display');
	disEle.scrollLeft = disEle.scrollLeft + event.deltaY * 3;
	// console.log(event.deltaY);
	console.log(disEle.scrollLeft);
	// console.log('滾動了 滾輪');
}
</script>

<style scoped lang="scss">
.draw_body {
	width: calc(1200px + 20px);
	height: calc(410px + 50px);

	background-color: rgba($color: #fbeee2, $alpha: 0.6);
}

.draw_unit {
	position: relative;
}

.draw_author {
	position: absolute;

	padding: 10px;

	top: 0px;
	left: 0px;
}

.draw_honor {
	position: absolute;

	top: 0px;
	padding: 10px;
	left: 50%;
	transform: translate(-50%, 0);
}

.draw_setting {
	position: absolute;

	padding: 10px;

	position: absolute;

	top: 0;
	left: 100%;
	transform: translate(-100%, 0px);
}

.setting_icon {
	width: 20px;
	height: 20px;
}

.draw_display {
	position: absolute;

	top: 40px;
	left: 10px;

	display: flex;

	width: 1200px;
	height: 410px;
	overflow-x: scroll;
	overflow-y: hidden;
}

.dis_imgPosition {
	width: 400px;
	height: 400px;

	margin: 0 5px;

	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
}

.dis_image {
	max-width: 400px;
	max-height: 400px;
}
</style>
